<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">图表展示</div>
                    <div class="contentsize">巡查、质量统计</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :model="form" label-width="100px" :inline="true">
                    <el-form-item label="项目：">
                        <el-select v-model="form.projectId" placeholder="请选择项目" @change="selectChanged" clearable>
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in tableData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-select v-model="form.type" placeholder="请选择类型" clearable>
                            <el-option label="日周月巡检" value="inspection"></el-option>
                            <el-option label="质量" value="issues"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间：">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.starTime"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                                clearable
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2" style="text-align: center">至</el-col>
                        <el-col :span="11">
                            <el-date-picker
                                placeholder="选择日期"
                                v-model="form.endTime"
                                style="width: 100%"
                                value-format="yyyy-MM-dd"
                                type="date"
                                clearable
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <div style="float: right">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search" class="searchcolor">查询</el-button>
                    </div>
                </el-form>
                <div style="clear: both"></div>
                <div id="myChart" class="righttop" ref="charts"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { projectList, CheckStatisticsProblem } from '@/api/index';
export default {
    name: 'echartslistquality',
    data: function () {
        return {
            form: {
                type: '',
                projectId: '',
                starTime: null,
                endTime: null
            },
            projectform: {
                address: '', //项目地址
                beginTime: '', //开工时间
                completionTime: '', //竣工时间
                current: 1, //第几页
                name: '', //项目名称
                pageSize: 1000000 //每页数量
            },
            checklist: [], //图表数据
            tableData: [] //项目列表
        };
    },
    mounted() {
        this.projectList(this.projectform);
    },
    methods: {
        // 项目列表
        projectList(data) {
            projectList(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                } else {
                    this.tableData = [];
                }
            });
        },
        // 搜索功能
        onSearch() {
            console.log(this.form);
            // if (this.form.projectId) {
            if (this.form.starTime == null && this.form.endTime != null) {
                this.$message.error('请选择开始时间！！');
            } else if (this.form.starTime != null && this.form.endTime == null) {
                this.$message.error('请选择结束时间！！');
            } else {
                CheckStatisticsProblem(this.form).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.checklist = res.data;
                        let xnum = [];
                        let ynum = [];
                        res.data.map((mapItem) => {
                            xnum.push(mapItem.problem);
                            ynum.push(mapItem.number);
                        });
                        console.log(xnum);
                        this.drawLine('巡查,质量统计', xnum, ynum);
                        console.log(res.data);
                    } else {
                        this.checklist = [];
                    }
                });
            }
            // }else{
            //      this.$message.error('请选择项目');
            // }
        },
        // 选择框
        selectChanged(e) {
            console.log(e);
        },
        // 获取点击以及数据列表
        drawLine(title, xdata, ydata) {
            console.log(this.$echarts);
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.charts);
            // 绘制图表
            myChart.setOption({
                title: { text: title },
                tooltip: {},
                grid: {
                    //直角坐标系内绘图网格
                    show: true, //是否显示直角坐标系网格。[ default: false ]
                    // left: '20%', //grid 组件离容器左侧的距离。
                    // right: '50%',
                    borderColor: '#c45455', //网格的边框颜色
                    bottom: '30%' //
                },
                xAxis: {
                    data: xdata,
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        interval: 0,
                        rotate: '45'
                    }
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: ydata
                    }
                ]
            });
            //让图表自适应
            window.addEventListener('resize', function () {
                myChart.resize(); // myChart 是实例对象
            });
            myChart.getZr().on('click', (params) => {
                let pointInPixel = [params.offsetX, params.offsetY];
                if (myChart.containPixel('grid', pointInPixel)) {
                    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                    console.log(xIndex);
                    this.$router.push({
                        name: 'echartsdetail',
                        params: {
                            type: this.checklist[xIndex].type,
                            problem: this.checklist[xIndex].problem,
                            starTime: this.form.starTime,
                            endTime: this.form.endTime,
                            projectId: this.form.projectId
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
</style>
<style scoped>
.righttop {
    margin: auto;
    /* width: 100%;
    height: 100%; */
    width: 1200px;
    height: 500px;
}
.container {
    overflow: hidden;
}
.handle-box {
    overflow: hidden;
}
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}
.indexTitle {
    margin-bottom: 20px;
}
.contentsize {
    font-size: 18px;
    font-weight: 700;
}
</style>

